<template>
  <div>
     <!-- 查看详情弹框 -->
    <el-dialog
      :title="title + '角色'"
      :visible.sync="addRoleShow"
      width="400px"
      :before-close="handleCloses"
      append-to-body
      :close-on-click-modal="false"
    >
    <!-- <p class="shopList"></p> -->
      <div class="sousuojg6_10" style="margin-bottom:20px">
        <el-form :inline="true" :rules="rules" ref="form" v-loading="listLoading" :model="formInline" class="demo-form-inline">
          <!-- <el-col>
          <el-form-item label-width="80px" label="归属机构" v-if='title == "编辑"'>
            <el-input  @input="e => formInline.name = validSe(e)" v-model="formInline.officeUid" disabled placeholder="请输入手机号"></el-input>
          </el-form-item></el-col> -->
          <el-col>
          <el-form-item label-width="80px" label="角色类型" v-if='title == "编辑"'>
            <el-input v-model="formInline.roleType" disabled placeholder="请输入手机号"></el-input>
          </el-form-item></el-col>
          <!-- <br> -->
          <el-col>
          <el-form-item label-width="80px" label="角色名称" prop="name">
            <el-input @keyup.native="btKeyUp" v-model="formInline.name" placeholder="请输入角色名称"></el-input>
          </el-form-item></el-col>
          <!-- <br/> -->
          <el-col>
          <el-form-item label-width="80px" label="英文名称">
            <el-input v-model="formInline.enname" placeholder="请输入英文名称"></el-input>
          </el-form-item></el-col>
          <br>
        </el-form>
      </div>
      <span slot="footer" style="margin-top:30px !important" class="dialog-footer">
        <el-button @click="handleCloses">取 消</el-button>
        <el-button type="primary" @click="saveUpdateRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bus from '../../assets/js/bus'
import https from '../../plugins/https'
import Utils from '../../assets/js/tree'
import qs from 'qs'
var unitAmts = (rule, value, callback) => {
  var reg = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/;
  if (value) {
    if (!reg.test(value)) {
      return callback();
    } else {
      return callback(new Error("请输入正确的金额"));
    }
  } else {
    return callback(new Error("请输入金额"));
  }
};
export default {
  props: {
    addRoleShow: {
      type: Boolean,
      default() {
          return false
      }
    },
    addRoleType: {
      type: Number
    },
    addRoleId: {
      type: Number
    }
  },
  
  data(){
    return{
      // rules:{
      //   name:[{ required: true, validator: unitAmts, message: "请输入商品售价" }]
      // },
      formInline: {
        id: null,
        name: '',
        enname: '',
        oemUid: localStorage.getItem('jurisdiction') == 0 ? localStorage.getItem('uid') : '',
        officeUid: localStorage.getItem('jurisdiction') == 2 ? localStorage.getItem('uid') : '',
      },
      imgData: [],
      totalNum: 0, //总页数
      tableData: [],
      title: '',
      listLoading: false
    }
  },
  watch : {
    addRoleShow (n) {
      if (n === true) {
        this.title = this.addRoleType == 1 ? '添加' : '编辑'
        if (this.addRoleType == 2) {
          this.formInline.id = this.addRoleId
          this.queryRoleDetail()
        }
      }
    }
  },
  mounted () {
    // console.log(555, this.eventShow)
  },
  methods:{
    btKeyUp(e) {
  e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,"");
},
    queryRoleDetail () {
      this.listLoading = true
      console.log(22, this.formInline.id, this.addRoleId)
      https.queryRoleDetail({id:this.formInline.id}).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        this.listLoading = false
        this.formInline = res.data.data
      })
    },
    saveUpdateRole () {
      https.saveUpdateRole(this.formInline).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          // 调用另一个子组件方法
          return
        }
        layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.listLoading = false
        bus.$emit("addRoleSuccess", {type:1,shoe:false})
        this.formInline = {
          id: null,
          name: '',
          enname: '',
          roleType: '',
          officeUid: localStorage.getItem('uid'),
          roleType: ''
        }
        Utils.$emit("shi1")
      })
      
    },
    queryProductInfo () {
      console.log(33)
      // this.listLoading = true
      // https.queryAgentInfo(this.formInline).then(res => {
      //   if (res.data.code !== '0000') {
      //     this.$notify({title: "错误",message: res.data.msg,type: "error"});
      //     this.listLoading = false
      //     return
      //   }
      //   console.log(666, res)
      //   this.tableData = res.data.data
      //   this.totalNum = res.data.total
      //   this.listLoading = false
      // })
    },
    handleCloses(done) {
      bus.$emit("addRoleSuccess", {type:2,shoe:false})
      this.formInline = {
        id: null,
        name: '',
        enname: '',
        officeUid: localStorage.getItem('uid'),
        roleType: ''
      }
      Utils.$emit("shi1")
    },
  }
}
</script>
<style scoped>
.btnExport {
  /* float: left; */
  margin-top: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
}
 .sousuojg6_10 {
   width: 100%;
  /* float: left; */
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  /* background-color: #f6f6f6; */
  border-radius: 5px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  font-size: 16px;
  height: 30px;
  margin-bottom: 30px;
}
/deep/ .el-dialog__body{
  padding-top: 0px
}
</style>
